<template>
  <el-container class="layout-container-demo" style="min-height: 100vh">
    <el-container>
      <el-main>
        <div style="padding: 10px 0">
          <el-date-picker type="date" v-model="startTime" placeholder="预计送达起始日期"></el-date-picker>
          <el-date-picker type="date" v-model="endTime" placeholder="预计送达截止日期"></el-date-picker>
          <el-select v-model="status" placeholder="请选择订单状态" clearable="true">
            <el-option
                v-for="item in statusOptions"
                :key="item.status"
                :label="item.label"
                :value="item.status"
            >
            </el-option>
          </el-select>
          <el-select v-model="type" placeholder="请选择订单类型" clearable="true">
            <el-option
                v-for="item in typeOptions"
                :key="item.type"
                :label="item.label"
                :value="item.type">
            </el-option>
          </el-select>
          <el-select v-model="inboundRoomId" placeholder="请选择分站地址" clearable="true">
            <el-option
                v-for="item in boundOptions"
                :key="item.provinceName"
                :label="item.provinceName"
                :value="item.provinceName">
            </el-option>
          </el-select>

          <el-button class="ml-5" type="primary" @click="findOrder">搜索</el-button>
        </div>
        <el-table :data="tableData" :height="600" empty-text="暂无符合条件的订单" border stripe>
          <el-table-column prop="oid" label="订单号" width="275">
          </el-table-column>
          <el-table-column prop="username" label="客户姓名" width="90">
          </el-table-column>
          <el-table-column prop="loc" label="投递地址" width="220">
          </el-table-column>
          <el-table-column prop="shoppingName" label="商品名称">
          </el-table-column>
          <el-table-column prop="shoppingNum" label="商品数量" width="120">
          </el-table-column>
          <el-table-column prop="arriveTime" label="预计完成日期" width="110">
          </el-table-column>
          <el-table-column prop="type" label="任务类型" :formatter="getType" width="100">
            <template v-slot="scope">
              <el-tag effect="dark" size="large" type="success" v-if="scope.row.type === 0">普通订单</el-tag>
              <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.type===1">退货单</el-tag>
              <el-tag effect="dark" size="large" v-else-if="scope.row.type===2">换货单</el-tag>
              <el-tag effect="dark" size="large" type="danger" v-else-if="scope.row.type===3">缺货单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="任务状态" :formatter="getStatus" width="125">
            <template v-slot="scope">
              <el-tag effect="light" size="large" type="success" v-if="scope.row.status === 0">可分配订单</el-tag>
              <el-tag effect="light" size="large" v-else-if="scope.row.status===1">库房出库订单</el-tag>
              <el-tag effect="light" size="large" v-else-if="scope.row.status===2">分库房到货订单</el-tag>
              <el-tag effect="light" size="large" v-else-if="scope.row.status===3">已分配订单</el-tag>
              <el-tag effect="light" size="large" v-else-if="scope.row.status===4">已领货订单</el-tag>
              <el-tag effect="light" size="large" type="info" v-else-if="scope.row.status===5">已完成订单</el-tag>
              <el-tag effect="light" size="large" type="info" v-else-if="scope.row.status===6">无效订单</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
              background
              :page-size=pageSize
              :total=totalSize
              layout="total, prev, pager, next"
              @current-change="pageChange"
              :current-page=pageNow
          />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
import Header from "@/components/Header";
import Main from "@/components/Main";
import Aside from "@/components/Aside.vue";
export default {
  name: 'orderInquire',
  data() {
    return {
      tableData:[],
      sideWidth: 200,
      startTime: null,
      endTime: null,
      inboundRoomId:null,
      pageSize:10,
      totalSize:100,
      pageNow:0,
      typeOptions:[
        {
          type: 0,
          label: '普通订单'
        },
        {
          type: 1,
          label: '退货单'
        },
        {
          type: 2,
          label: '换货单'
        },
        {
          type: 3,
          label: '缺货单'
        },
        {
          type: null,
          label: ''
        }],
      type:null,
      boundOptions:[],
      bound:null,
      statusOptions:[
        {
          status: 0,
          label: '可分配订单'
        },
        {
          status: 1,
          label: '库房出库订单'
        },
        {
          status: 2,
          label: '分库房到货订单'
        },
        {
          status: 3,
          label: '已分配订单'
        },
        {
          status: 4,
          label: '已领货订单'
        },
        {
          status: 5,
          label: '已完成订单'
        },
        {
          status: 6,
          label: '无效订单'
        },
        {
          status:null,
          label: ''
        }
        ],
      status:null,
    }
  },
  methods: {
    getBoundOptions(){
      axios.get("http://localhost:1080/province").then(res=>{
        res=res.data
        if(res.code=='200'){
          this.boundOptions=res.data
        }else {
        }
      })
    },
    getType(row,column){
      if (row.type === 0) {
        return '普通订单'
      } else  if(row.type===1){
        return '退货单'
      }else if (row.type===2){
        return '换货单'
      }else if (row.type===3){
        return '缺货单'
      }
    },
    getStatus(row,column){
      if(row.status===0){
        return '可分配订单'
      }else if(row.status===1){
        return '库房出库订单'
      }else if(row.status===2){
        return '分库房到货订单'
      }else if(row.status===3){
        return '已分配订单'
      }else if(row.status===4){
        return '已领货订单'
      }else if(row.status===5){
        return '已完成订单'
      }else if(row.status===6){
        return '无效订单'
      }
    },
    findOrder(){
      console.log(this.inboundRoomId)
      axios.post("http://localhost:1030/orderInquire/findOrder",{
        type:this.type,
        status:this.status,
        startTime:this.startTime,
        endTime:this.endTime,
        inboundRoomId:this.inboundRoomId,
        pageNow:0,
        pageSize:10
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 0
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })
    },
    pageChange(val){
      this.pageNow=val
      axios.post("http://localhost:1030/orderInquire/findOrder",{
        type:this.type,
        status:this.status,
        startTime:this.startTime,
        endTime:this.endTime,
        inboundRoomId:this.inboundRoomId,
        pageNow:(val-1)*10,
        pageSize:10
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })
    },
    loadPost(){
      axios.post("http://localhost:1030/orderInquire/findOrder",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    }
  },
  beforeMount() {
    this.loadPost();
    this.getBoundOptions()
  },
  components  : {
    Aside,
    Header,
    Main,

  }
}
</script>


<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
</style>